<template>
  <div>
    <!-- <top-nav-bar :applyPageRoute="nowRouteTitle" @back="back"></top-nav-bar> -->

    <a-card :bordered="false" :bodyStyle="{ padding: '24px 16px', height: '100%' }">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="搜索学员:">
                <a-input v-model="student" placeholder="搜索学员" style="width:80%;"
                  @pressEnter="$refs.table.refresh(true)">
                  <a-tooltip slot="suffix" title="请搜索学员">
                    <a-icon type="search" style="color: rgba(0,0,0,.45)" @click="$refs.table.refresh()" />
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="试听时间">
                <a-range-picker @change="onChange" style="width:80%;" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="试听状态">
                <a-select v-model="queryParam.status" placeholder="请选择试听状态" allowClear style="width:80%;">

                  <a-select-option value="1">已预约</a-select-option>
                  <a-select-option value="2">已取消</a-select-option>
                  <a-select-option value="3">已体验</a-select-option>
                  <a-select-option value="4">已过期</a-select-option>
                  <a-select-option value="5">已报名</a-select-option>

                </a-select>
              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="试听课程">
                  <a-select v-model="queryParam.course_id" placeholder="请选择课程" allowClear style="width:80%;">
                    <a-select-option v-for="(item, index) in courseList" :key="index" :value="item.id">{{ item.name
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="试听班级">
                  <a-select v-model="queryParam.class_id" placeholder="请选择班级" allowClear style="width:80%;">
                    <a-select-option v-for="(item, index) in classList" :key="index" :value="item.id">{{ item.name
                      }}</a-select-option>
                  </a-select>
                  <!-- <a-cascader :options="options" change-on-select @change="onChange" allowClear v-model="queryParam.class_id"/> -->
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="上课老师">
                  <a-select v-model="queryParam.teacher_id" placeholder="请选择上课老师" allowClear style="width:80%;">
                    <a-select-option v-for="(item, index) in teacherList" :key="index" :value="item.id">{{ item.name
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="跟进人:">
                  <a-select v-model="queryParam.user_id" placeholder="请选择跟进人" allowClear style="width:80%;">
                    <a-select-option v-for="(item, index) in userList" :key="index" :value="item.id">{{ item.name
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="学管师:">
                  <a-select v-model="queryParam.academic_supervisor" placeholder="请选择学管师" allowClear style="width:80%;">
                    <a-select-option v-for="(item, index) in userList" :key="index" :value="item.id">{{ item.name
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </template>
            <!-- <a-col :md="!advanced && 8 || 24" :sm="24">
              <span
                class="table-page-search-submitButtons"
                :style="advanced && { float: 'right', overflow: 'hidden' } || {} "
              >
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>-->
          </a-row>
        </a-form>
      </div>
      <a style="cursor:pointer" v-if="advanced" @click="more" id="moreButton">
        收起
        <a-icon type="up"></a-icon>
      </a>
      <a style="cursor:pointer" v-if="!advanced" @click="more" id="moreButton">
        展开
        <a-icon type="down"></a-icon>
      </a>
      <div class="table-operator">
        <a-button @click="exportListen">导出</a-button>
      </div>
      <s-table ref="table" :columns="columns" :data="loadData" class="user_management_table" style="margin-top:20px;"
        :pagination="pagination" :scroll="{ x: 1500 }">
        <span slot="name" slot-scope="text,record">
          <router-link :to="{ name: 'student_Info', query: { id: record.student_id } }"
            key="/educationalCenter/studentExpand/studentInfo">
            <a>{{ text }}</a>
          </router-link>
        </span>
        <span slot="status" slot-scope="text,record">
          <span v-if="record.status == 1">已预约</span>
          <span v-if="record.status == 2">已取消</span>
          <span v-if="record.status == 3">已体验 </span>
          <span v-if="record.status == 4">已过期 </span>
          <span v-if="record.status == 5">已报名</span>
        </span>
        <!-- <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span> -->
        <span slot="action" slot-scope="text,record">
          <span v-if="record.status == 4">
            <a @click="showLessonTable(record)">重约</a>
          </span>
          <span v-if="record.status == 1">
            <a @click="showLessonTable(record)">重约</a>
            <a-divider type="vertical" />
            <a href="javascript:;" @click="cancelOrder(record)">取消预约</a>
          </span>
          <span v-if="record.status == 2 || record.status == 3 || record.status == 5">--</span>
        </span>
      </s-table>
      <create-form ref="createModal" @ok="handleOk" />
      <listen-lesson-table ref="lessonTable" :list_id="listID" :student_id="studentID"></listen-lesson-table>
    </a-card>
    <div class="ant-card" style="margin-top: 30px;padding: 30px;">
      <div style="display: flex;justify-content: space-between;">
        <h2>试听记录数据展示</h2>
        <a-dropdown-button @click="handleButtonClick">
          选择时间段
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="1"> <a-icon type="book" />8:00-12:00</a-menu-item>
            <a-menu-item key="2"> <a-icon type="book" />14:00-17:45</a-menu-item>
            <a-menu-item key="3"> <a-icon type="book" />20:00-21:30</a-menu-item>
          </a-menu>
        </a-dropdown-button>
      </div>
      <div style="display: flex; justify-content: space-around;">
        <div class="echart">
          <div class="echart" id="lineDemo" ref="chart" style="width: 1200px;height: 500px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import listenLessonTable from '@/components/lesson'
import CreateForm from '@/views/list/modules/CreateForm'
import { auditionList, auditionCancel, auditionExport } from '@/api/audition'
import { coursesList } from '@/api/courseCharge'
import { classList } from '@/api/class'
import { accountList } from '@/api/account'
import { teacherList } from '@/api/teacher'
export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
    CreateForm,
    listenLessonTable
  },
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          data: ['Direct', 'Marketing', 'Search Engine', 'Email', 'Union Ads', 'Video Ads', 'Baidu', 'Google', 'Bing', 'Others'],
          textStyle: {
            color: '#a1a1a1'
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
              position: 'inner',
              fontSize: 14
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1548, name: 'Search Engine', itemStyle: { color: 'rgb(84,112,198)' } },
              { value: 775, name: 'Direct', itemStyle: { color: 'rgb(250,220,88)' } },
              { value: 679, name: 'Marketing', selected: true, itemStyle: { color: 'rgb(145,204,117)' } }
            ]
          },
          {
            name: 'Access From',
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
              length: 30
            },
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}:}{c}  {per|{d}%}  ',
              backgroundColor: '#F6F8FC',
              // 背景线颜色
              borderColor: '#8C8D8E',
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: '#6E7079',
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: '#8C8D8E',
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
                b: {
                  color: '#4C5058',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 33
                },
                per: {
                  color: '#fff',
                  backgroundColor: '#4C5058',
                  padding: [3, 4],
                  borderRadius: 4
                }
              }
            },
            data: [
              { value: 1048, name: 'Baidu', itemStyle: { color: 'rgb(255,112,112)' } }, // 自定义颜色
              { value: 335, name: 'Direct', itemStyle: { color: 'rgb(159,224,128)' } }, // 自定义颜色
              { value: 310, name: 'Email', itemStyle: { color: 'rgb(126,211,243)' } }, // 自定义颜色
              { value: 251, name: 'Google', itemStyle: { color: 'rgb(64,178,125)' } }, // 自定义颜色
              { value: 234, name: 'Union Ads', itemStyle: { color: 'rgb(252,132,82)' } }, // 自定义颜色
              { value: 147, name: 'Bing', itemStyle: { color: 'rgb(154,96,180)' } }, // 自定义颜色
              { value: 135, name: 'Video Ads', itemStyle: { color: 'rgb(234,124,204)' } }, // 自定义颜色
              { value: 102, name: 'Others', itemStyle: { color: 'rgb(84,112,198)' } } // 自定义颜色
            ]
          }
        ]
      },
      pagination: {
        showTotal: total => `共${total}条数据`,
      },
      mdl: {},
      advanced: false,
      student: '',
      queryParam: {
        school_id: this.$store.state.user.school,
        // student: '',
        // status: null,
        // course_id: null,
        // class_id: null,
        // teacher_id: null,
        // user_id: null,
        // academic: null,
        // beginTime:'',
        // endTime:''
      },
      columns: [
        {
          title: '学员姓名',
          dataIndex: 'name',
          width: 150,
          fixed: 'left',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '性别',
          dataIndex: 'sex',
          width: 100,
          align: 'center',
          customRender(sex) {
            return sex == 1 ? '男' : sex == 2 ? '女' : '' //1是男，2是女
          },
        },
        {
          title: '手机号码',
          width: 100,
          dataIndex: 'main_phone',
        },
        {
          title: '试听课程',
          dataIndex: 'course_name',
          width: 100,
          ellipsis: true,
        },
        {
          title: '试听班级',
          dataIndex: 'class_name',
          width: 150,
          ellipsis: true,
        },
        {
          title: '试听时间',
          dataIndex: 'time',
          width: 150,
          ellipsis: true,
        },
        {
          title: '上课老师',
          width: 100,
          dataIndex: 'teacher_names',
        },
        {
          title: '授课课时',
          width: 100,
          dataIndex: 'duration',
          align: 'center',
        },
        {
          title: '跟进人',
          width: 100,
          dataIndex: 'user_name',
          customRender(user_name) {
            return user_name || '待分配'
          },
        },
        {
          title: '学管师',
          width: 100,
          dataIndex: 'academic_supervisor',
          customRender(academic_supervisor) {
            return academic_supervisor || '待分配'
          },
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          fixed: 'right',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return auditionList(Object.assign(parameter, this.queryParam, { student: this.student })).then((res) => {
          return res
        })
      },
      studentID: null,
      listID: null,
      //条件查询
      courseList: [],
      classList: [],
      userList: [],
      teacherList: [],
    }
  },
  mounted() {
    const chartDom = document.getElementById('lineDemo')
    const myChart = this.$echarts.init(chartDom)
    myChart.clear()
    myChart.setOption(this.option)
  },
  watch: {
    queryParam: {
      handler(newName, oldName) {
        this.$refs.table.refresh()
      },
      //immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: false,
      deep: true, // 开启深度监听，默认是false
    },
  },
  filters: {
    statusFilter(type) {
      return statusMap[type].text
    },
    statusTypeFilter(type) {
      return statusMap[type].status
    },
  },
  created() {
    classList({ school_id: this.queryParam.school_id, pageSize: 999999 })
      .then((res) => {
        this.classList = res.data
      })
      .catch((err) => {
        this.$message.error(err.data.message || '获取班级列表失败，请稍后重试')
      })
    accountList({ school_id: this.queryParam.school_id, pageSize: 999999 })
      .then((res) => {
        this.userList = res.data
      })
      .catch((err) => {
        this.$message.error(err.data.message || '获取跟进人列表失败，请稍后重试')
      })
    teacherList({ school_id: this.queryParam.school_id, pageSize: 999999 })
      .then((res) => {
        this.teacherList = res.data
      })
      .catch((error) => { })
  },
  methods: {
    handleButtonClick(e) {
      console.log('click', e)
    },
    handleMenuClick(e) {
      console.log('click', e)
    },
    //导出
    exportListen() {
      let params = Object.assign(this.queryParam, { student: this.student })
      auditionExport(params)
        .then((res) => {
          window.location.href = res.url.url + res.url.path
        })
        .catch((err) => {
          this.$message.error(err.data.message || '导出失败')
        })
    },
    nowClick(e) {
      this.$router.push({ name: 'studentInfo' })
    },
    cancelOrder(e) {
      let that = this
      this.$confirm({
        title: '提示',
        content: '确定取消预约？',
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          auditionCancel(e.id)
            .then((res) => {
              that.$message.success('取消预约成功')
              that.$refs.table.refresh()
            })
            .catch((err) => {
              that.$message.error(err.data.message || '取消预约失败')
            })
        },
        onCancel() {
          console.log('Cancel')
        },
      })
    },
    handleEdit(record) { },
    handleSub(record) {
      if (record.status !== 0) {
        this.$message.info(`${record.no} 订阅成功`)
      } else {
        this.$message.error(`${record.no} 订阅失败，规则已关闭`)
      }
    },
    handleOk() {
      this.$refs.table.refresh()
    },

    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date()),
      }
    },
    showLessonTable(e) {
      this.listID = e.id
      this.studentID = e.student_id
      this.$refs.lessonTable.showVisible()
    },
    onChange(date, dateString) {
      this.queryParam.beginTime = dateString[0]
      this.queryParam.endTime = dateString[1]
      this.$refs.table.refresh()
    },
    more() {
      this.advanced = !this.advanced
    },
  },
}
</script>
<style lang="less" scoped>
.expand_warning {
  margin: 16px 0;
  background-color: #fff0e7;
  border-radius: 4px;
}

#moreButton {
  position: absolute;
  top: 34px;
  right: 20px;
}
</style>